<template>
  <div class="app">
    <el-container>
      <el-aside
        class="app-side app-side-left"
        style="background: #001529;text-align:left"
        :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'"
      >
        <div style="height: 60px;line-height: 60px;color:#fff;text-align:center">学生选课系统</div>
        <div style="font-weight:500">
          <!-- 我是样例菜单 -->
          <!-- 管理员菜单 -->
          <el-menu v-if="role == 1"
            router
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="rgb(0, 21, 41)"
            text-color
            active-text-color
            @open="handleOpen"
            :collapse="isCollapse"
          >
            <el-menu-item index="/student">
              <i class="el-icon-menu"></i>
              <span slot="title">学生信息管理</span>
            </el-menu-item>
            <el-menu-item index="/course">
              <i class="el-icon-setting"></i>
              <span slot="title">课程信息管理</span>
            </el-menu-item>
            <el-menu-item index="/xuanke">
              <i class="el-icon-setting"></i>
              <span slot="title">选课系统管理</span>
            </el-menu-item>
            <el-menu-item index="/score">
              <i class="el-icon-setting"></i>
              <span slot="title">成绩信息管理</span>
            </el-menu-item>
            <el-menu-item index="/daka">
              <i class="el-icon-setting"></i>
              <span slot="title">签到管理</span>
            </el-menu-item>
            <el-menu-item index="/kaoqin">
              <i class="el-icon-setting"></i>
              <span slot="title">考勤记录管理</span>
            </el-menu-item>
          </el-menu>

          <!-- 老师菜单 -->
          <el-menu v-if="role == 2"
            router
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="rgb(0, 21, 41)"
            text-color
            active-text-color
            @open="handleOpen"
            :collapse="isCollapse"
          >
            <el-menu-item index="/course">
              <i class="el-icon-setting"></i>
              <span slot="title">课程信息管理</span>
            </el-menu-item>
            <el-menu-item index="/xuanke">
              <i class="el-icon-setting"></i>
              <span slot="title">选课系统管理</span>
            </el-menu-item>
            <el-menu-item index="/score">
              <i class="el-icon-setting"></i>
              <span slot="title">成绩信息管理</span>
            </el-menu-item>
            <el-menu-item index="/daka">
              <i class="el-icon-setting"></i>
              <span slot="title">签到管理</span>
            </el-menu-item>
            <el-menu-item index="/kaoqin">
              <i class="el-icon-setting"></i>
              <span slot="title">考勤记录管理</span>
            </el-menu-item>
          </el-menu>

          <!-- 学生菜单 -->
          <el-menu v-if="role == 3"
            router
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="rgb(0, 21, 41)"
            text-color
            active-text-color
            @open="handleOpen"
            :collapse="isCollapse"
          >
            <el-menu-item index="/student">
              <i class="el-icon-menu"></i>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="/course">
              <i class="el-icon-setting"></i>
              <span slot="title">课程信息</span>
            </el-menu-item>
            <el-menu-item index="/xuanke">
              <i class="el-icon-setting"></i>
              <span slot="title">我的选课</span>
            </el-menu-item>
            <el-menu-item index="/score">
              <i class="el-icon-setting"></i>
              <span slot="title">我的成绩</span>
            </el-menu-item>
            <el-menu-item index="/daka">
              <i class="el-icon-setting"></i>
              <span slot="title">我的签到</span>
            </el-menu-item>
            <el-menu-item index="/kaoqin">
              <i class="el-icon-setting"></i>
              <span slot="title">我的考勤</span>
            </el-menu-item>
          </el-menu>

        </div>
      </el-aside>

      <el-container>
        <el-header class="app-header" style="background:#fff">
          <div style="position:absolute;right:50px">
            欢迎您{{','+user}}
            <el-dropdown :hide-on-click="false" @command="handle">
              <span class="el-dropdown-link">
                
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main class="app-body" style="line-height:auto">
          <template>
            <router-view></router-view>
          </template>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Container",
  data() {
    return {
      username: "",
      isCollapse: false,
      data: [
        {
          value: "1",
          label: "退出登陆"
        }
      ],
      role: localStorage.getItem("role")
        ? parseInt(localStorage.getItem("role"))
        : 0,
        user:localStorage.getItem("role")? (JSON.parse(localStorage.getItem("user")).user.userName || JSON.parse(localStorage.getItem("user")).user.name) : '',
    };
  },
  methods: {
    toggleSideBar() {
      this.isCollapse = !this.isCollapse;
    },
    logout: function() {
      this.$confirm("确认退出?", "提示", {})
        .then(() => {
          sessionStorage.removeItem("user");
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    handle() {
      localStorage.clear();
      window.location.href = window.location.origin;
    }
  },
  mounted: function() {
    let user = sessionStorage.getItem("user");
    if (user) {
      this.username = user;
    }
  }
};
</script>

<style>
.app-body{
  line-height: 28px;
}
.el-menu-item.is-active {
  background: #fff;
}
</style>